<!--视频弹幕组-->
<template>
    <div class="video-danmu-group">

        <div class="video-danmu-group-title">
            <span style="font-size:16px;">弹幕列表 <icon name="cham-more" scale="1.4" style="margin:0 0 !important;"></icon></span>
            <span style="font-size:12px;float:right;line-height:43px;padding-right:20px;cursor:pointer" @click="changeDanmuGroupStatus">{{danmuGroupTitleShowOrHidden}}</span>
        </div>

        <div style="position:relative;color:#6D757A;padding:0px 16px 0px 16px" v-show="danmuGroupContentHeight===400">
            <div style="float:left;width:60px;height:32px;line-height:32px;">时间</div>
            <div style="width:175px;height:32px;float:left;line-height:32px;">弹幕内容</div>
            <div style="width:80px;height:32px;float:left;line-height:32px;">发送时间</div>
        </div>

        <div class="video-danmu-group-content" style="color:black;" v-bind:style="{height:danmuGroupContentHeight+'px'}">

            <el-scrollbar style="height:400px">

                <template v-for="item in danmuList">
                    <div style="color:#6D757A;padding:0px 16px 0px 16px">
<!--                        {{item}}-->
                        <div style="float:left;width:60px;height:24px;line-height:24px;font-size:12px;">{{item.sliderValue}}</div>
                        <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">{{item.danmuContent}}</div>
                        <div style="width:80px;height:24px;float:left;line-height:24px;font-size:12px;">{{item.danmuCreateDate.substring(5,10)}} {{item.danmuCreateDate.substring(11,16)}}</div>
                    </div>
                </template>
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->
<!--                <div style="color:#6D757A;padding:0px 16px 0px 16px">-->
<!--                    <div style="float:left;width:40px;height:24px;line-height:24px;font-size:12px;">01:32</div>-->
<!--                    <div style="width:175px;height:24px;float:left;line-height:24px;color:#222222;font-size:12px;">军事补给，太给力了吧</div>-->
<!--                    <div style="width:100px;height:24px;float:left;line-height:24px;font-size:12px;">02-19 20:26</div>-->
<!--                </div>-->

            </el-scrollbar>
        </div>


        <!--        <div style="height:600px;">-->
        <!--            <el-scrollbar style="height:100%">-->
        <!--                <div style="width:700px;height:700px;border:solid;" >-->
        <!--                    ....... blabla.....-->
        <!--                </div>-->
        <!--            </el-scrollbar>-->
        <!--        </div>-->
    </div>
</template>

<script>

    import chamUtils from '@/utils/chamUtils';

    export default {
        name: "videoDanmuGroup",
        data () {
            return {
                danmuGroupContentHeight:0,
                danmuGroupTitleShowOrHidden:'展开',
                danmuList:[]
            }
        },
        methods:{
            changeDanmuGroupStatus(){
                var self = this;
                if(self.danmuGroupContentHeight===0){
                    debugger;
                    self.danmuGroupContentHeight = 400;
                    self.danmuGroupTitleShowOrHidden = '隐藏';
                    return;
                }

                if(self.danmuGroupContentHeight!=0){
                    debugger;
                    self.danmuGroupContentHeight = 0;
                    self.danmuGroupTitleShowOrHidden = '展开';
                    return;
                }

                // this.danmuGroupContentHeight = 0;
                // debugger;
            }
        },
        mounted(){
            var self = this;
            var videoInfo = JSON.parse(window.localStorage.getItem("videoInfo"));
            var videoId = videoInfo.videoId;
            var danmuForm = new Object();
            danmuForm.videoId = videoId;
            self.$api.get('danmu-service/danmuController/getTop1000DanmuByVideoId',danmuForm, result => {
                for(var i in result){
                    var sliderValue = result[i].sliderValue;
                    result[i].sliderValue = chamUtils.getTimeStrFormNum(sliderValue);
                }
                self.danmuList = result;
            });
        }
    }
</script>

<style scoped>
    .video-danmu-group{
        /*background-color: #f4f4f4;*/
        border-radius: 2px;
        min-height:40px;
        margin-bottom:20px;
        margin-top:10px;
        margin-left:10px;
    }

    .video-danmu-group-title{
        background-color: #f4f4f4;
        height:42px;
        padding: 0 16px;
        color:#212121;
        line-height:42px;
    }

    .video-danmu-group-content{
        width:100%;
        /*height:400px;*/
        overflow:scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        transition: height .2s;
    }
</style>
